<template>
	<view class="fy-dropdown-floor">
		<scroll-view :scroll-y="true" style="height: 660rpx;">
			<view class="fy-dropdown-floor_item" v-for="(item, index) in options" :key="index">
				<text class="fy-dropdown-floor_title" v-if="item.title!==''">{{ item.title }}</text>
				<view class="fy-dropdown-floor_ul">
					<text
						:class="['fy-dropdown-floor_li', selected[item.key].indexOf(cell.value) >-1  ? 'fy-dropdown-floor_li__active' : '']"
						v-for="(cell, cellIndex) in item.list" :key="cellIndex"
						@click.stop.prevent="handlerCellClick(item.key, cell.value)">{{ cell.text }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="fy-dropdown-button-list">
			<button class="fy-dropdown-button-item" @click="handlerCancel"><text class="fy-dropdown-button-text"
					:style="{color: cancelColor}">重置</text></button>
			<text class="fy-dropdown-button-border-left"></text>
			<button class="fy-dropdown-button-item" @click.stop.prevent="handlerConfirm"><text
					class="fy-dropdown-button-text" :style="{color: confirmColor}">确定</text></button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 选项数据，如果传入了默认slot，此参数无效
			options: {
				type: Array,
				default () {
					return [

					]
				}
			},
			cancelColor: {
				type: String,
				default: '#333333'
			},
			confirmColor: {
				type: String,
				default: '#b5001e'
			},
			inddCode: {
				type: Object,
				default: () => { return {}}
			},
			showArr: false
		},
		data() {
			return {
				selected: {}, // 存储选中的值
				list: [],
				obj: ""
			}
		},
		watch: {
			options: {
				immediate: true,
				deep: true,
				handler: function(list) {
					this.list = list;
					for (var i = 0, len = list.length; i < len; i++) {
						if (list[i]['key']) {
							this.$set(this.selected, list[i]['key'], list[i]['default']);
						}
					}
					// this.codeRef()//an
				}
			},
		},
		methods: {
			// codeRef() {//an
			// 	console.log(this.inddCode,'/////////////////////////')
			// 	const code = this.inddCode.types
			// 	if (Array.isArray(this.inddCode.code)) {
			// 		switch (code) {
			// 			//0是服务类型
			// 			case '0':
			// 			console.log(this.selected,'/////////////////////////')
			// 				this.selected.prjType = this.inddCode.code;
			// 				break;
			// 		}

			// 	}
			// 	console.log(this.selected,'/////////////////////////')
			// 	console.log(this.selected,'/////////////////////////')
			// },
			//选中下拉框中的选项时
			handlerCellClick(key, data) {
				console.log(key, data, this.selected);


				var selectdata = this.selected[key]
				console.log('selectdata', selectdata);
				var idx = selectdata.indexOf(data);
				if (idx > -1) {
					selectdata.splice(idx, 1);
				} else {
					if (key == 'rangeType') {
						selectdata.push(data)
						if (selectdata.length > 1) {
							selectdata = selectdata.shift()
						}
					} else {
						selectdata.push(data)
					}

				}
				// this.$set(this.selected, key, selectdata);
			},
			//重置
			handlerCancel() {
				// var list = this.list;
				// for (var i = 0, len = list.length; i < len; i++) {
				// 	console.log('********',list[i]['key']);
				// 	if (list[i]['key']) {
				// 		// this.$set(this.selected, list[i]['key'], list[i]['defaultReset']);

				// 	}
				// }
				console.log('fjuauhrug陈', this.list);
				this.selected.prjStatus = []
				this.selected.prjType = [] //类型
				this.selected.rangeType = [] //状态
				this.selected.settleStatusList = [] //开票状态
				this.selected.invoiceStatusList = [] //回款状态
			},

			handlerConfirm() {
				try {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selected))
					})
				} catch (err) {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selected))
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	// @include vue-flex;

	.fy-dropdown-floor {
		width: 100%;
		background-color: #FFFFFF;
		// background-color: aqua;
		border-top: 1px solid #f2f2f2;
		position: fixed;
		top: 190rpx;
		/*#ifdef APP-PLUS */
		top: 200rpx;
		/*#endif */
		/*#ifdef H5 */
		top: 280rpx;
		/*#endif */
		/*#ifdef MP-WEIXIN */
		top: 208.5rpx;
		/*#endif */
		border-radius: 0 0 10px 10px;
	}

	.fy-dropdown-floor_item {
		margin-top: 42rpx;
	}

	.fy-dropdown-floor_title {
		font-size: 30rpx;
		color: #333333;
		padding-bottom: 6rpx;
		margin-left: 40rpx;
		font-weight: bold;
	}

	.fy-dropdown-floor_ul {
		@include vue-flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx 0 20rpx;
	}

	// 需要循环的数据
	.fy-dropdown-floor_li {
		border: 1px solid #EFEFEF;
		height: 52rpx;
		width: 30%;
		line-height: 49rpx;
		text-align: center;
		border-radius: 26rpx;
		background-color: #EFEFEF;
		// background-color: red;
		color: #898989;
		font-size: 26rpx;
		margin-left: 2.2%;
		margin-top: 20rpx;
		/*溢出隐藏,超出部分变成省略号*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.fy-dropdown-floor_li__active {
		border-color: #B5001E;
		color: #B5001E;
		background-color: #ffffff;
	}


	.fy-dropdown-button-list {
		@include vue-flex;
		align-items: center;
		border-top: 1px solid #f6f6f6;
		border-radius: 0 0 10px 10px;
		margin-top: 20rpx;
	}

	.fy-dropdown-button-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 0;
		border-width: 0rpx;
		border-radius: 0 0 10px 10px;

		/* #ifndef APP-NVUE */
		&::after {
			border: none;
		}

		/* #endif */
	}

	.fy-dropdown-button-text {
		font-size: 30rpx;
	}

	.fy-dropdown-button-border-left {
		width: 1px;
		height: 100rpx;
		background-color: #f2f2f2;
		transform: scaleX(0.7);
	}

	// 点击更多显示隐藏
	.greater {
		width: 85%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		// background-color: aqua;
	}
</style>
